<template>
    <el-card class="good-container">
        <template #header>
            <div class="header">
                <el-button type="primary" :icon="Plus" @click="handleAdd">新增分类</el-button>
                <el-button @click="getChecked" type="primary">批量删除</el-button>
            </div>
        </template>
        <el-table ref="tableRef" :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="50" fixed="left"></el-table-column>
            <el-table-column prop="category_id" label="分类编号">
            </el-table-column>
            <el-table-column prop="parent_id" label="父分类编号">
            </el-table-column>
            <el-table-column prop="name" label="分类名称">
            </el-table-column>

            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row)">修改</a>
                    <a style="cursor: pointer; margin-right: 10px" @click="handleDel(scope.row.category_id)">删除</a>
                </template>
            </el-table-column>
        </el-table>
        <!--总数超过一页，再展示分页器-->
        <el-pagination background layout="total,prev, pager, next" :total="state.total" :page-size="state.pageSize"
            :current-page="state.currentPage" @current-change="changePage" />
    </el-card>
    <el-dialog title="修改分类" v-model="state.showEditDialog" style="width: 50%;height: 500px;">
        <el-form style="width: 100%;" label-width="100">
          <el-form-item label="父分类编号">
            <el-input placeholder="请输入父分类编号" v-model="form.parent_id"></el-input>
          </el-form-item>
            <el-form-item label="分类名称">
                <el-input placeholder="请输入分类名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="doEdit">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="添加分类" v-model="state.showAddDialog" style="width: 50%;height: 500px;">
        <el-form style="width: 100%;" label-width="100">
            <el-form-item label="父分类编号">
              <el-input placeholder="请输入父类编号" v-model="form.parent_id"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
                <el-input placeholder="请输入分类名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="doAdd">确认添加</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const app = getCurrentInstance()
const router = useRouter()
const state = reactive({
    loading: false,
    tableData: [], // 数据列表
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
    showEditDialog: false,
    showAddDialog: false,
    category_id:'',
})

const tableRef = ref();

const form = ref({
    parent_id: '',
    name: '',
})

onMounted(() => {
    getList();
})

// 获取列表
const getList = () => {
    state.loading = true//加载的动画图标显示
    axios.get("/categories/list", {
        params: {
            page: state.currentPage,
            limit: state.pageSize,
        }
    }).then(res => {
        state.tableData = res.records;
        state.total = res.total;
    })
}

const doEdit = () => {
  let params={category_id:state.category_id,parent_id:form.value.parent_id,name:form.value.name}
    axios.post("/categories/doEdit", params).then(res => {
        if (res == 0) {
            ElMessage({
                showClose: true,//是否显示关闭按钮
                message: "修改成功!",//消息窗口中的样式类型
                type: "success",//消息窗口中的样式类型
                duration: 2000,//消息窗口关闭后的回调函数
                onClose: () => {
                    state.showEditDialog = false;//关闭对话框
                    form.value = {
                        parent_id: '',
                        name: ''
                    }
                    getList();//刷新本页面
                }
            })
        }
    })
}


const doAdd = () => {
    axios.post("/categories/doAdd", form.value).then(res => {
        if (res == 0) {
            ElMessage({
                showClose: true,//是否显示关闭按钮
                message: "增加成功!",//消息窗口中的样式类型
                type: "success",//消息窗口中的样式类型
                duration: 2000,//消息窗口关闭后的回调函数
                onClose: () => {
                    state.showAddDialog = false;//关闭对话框
                    form.value = {
                        parent_id: '',
                        name: ''
                    }
                    getList();//刷新本页面
                }
            })
        }
    })
}

const handleAdd = () => {
    state.showAddDialog = true;
}

const handleDel = (id) => {
    axios.get("/categories/del?categoryid=" + id).then(res => {
        if (res == 0) {
            ElMessage({
                showClose: true,//是否显示关闭按钮
                message: "删除成功!",//消息窗口中的样式类型
                type: "success",//消息窗口中的样式类型
                duration: 2000,//消息窗口关闭后的回调函数
                onClose: () => {
                    location.reload();//刷新本页面
                }
            })
        }
    })
}

const handleEdit = (category) => {
    form.value.parent_id = category.parent_id;
    form.value.name = category.name;
    state.category_id = category.category_id;
    state.showEditDialog = true;
}

const changePage = (val) => {
    state.currentPage = val
    getList()
}

const getChecked = () => {
    const selectAry = tableRef.value.getSelectionRows();
    let ids = selectAry.map(item => item.category_id);
    console.log(ids);
    axios.post("/categories/delMult", ids).then(res => {
        if (res == 0) {
            ElMessage({
                message: "批量删除成功!",
                type: "success",//消息窗口中的样式类型
                duration: 2000,//消息窗口关闭后的回调函数
            })
            getList();
        }
    })
}

</script>

<style scoped>
.good-container {
    min-height: 100%;
}

.el-card.is-always-shadow {
    min-height: 100% !important;
}
</style>